<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
   
    <table  class="table table-bordered text-center" style="table-layout:fixed " id="emp_show">
		<tr>
			<th class="text-center col-xs-2"><input type="checkbox" id="checkall" ">部门名称</th>
			<th class="text-center">姓名</th>
			<th class="text-center" >职位</th>
			<th class="text-center" >手机</th>
			<th class="text-center" >固定电话</th>
			<th class="text-center" >内线</th>
			<th class="text-center" >短号</th>
			<th class="text-center col-xs-2" >邮箱</th>
			<th class="text-center" >排序</th>
			<th class="text-center" >编辑</th>
		</tr>
		<c:forEach items = "${emploeelist}" var = "emploee"  >
		<tr id= "${emploee.id}">
		    
		    <td ><input type="checkbox">${emploee.dept.deptName}</td>
		    <td >${emploee.name}</td>
		    <td >${emploee.position}</td>
		    <td >${emploee.mobile}</td>
		    <td >${emploee.phone}</td>
		    <td >${emploee.interphone}</td>
		    <td >${emploee.shortphone}</td>
		    <td >${emploee.email}</td>
		    <td name="show_ord">
		         <button type="button" class="btn btn-default btn-sm" aria-label="Left Align" name="up_ord" >
                    <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                 </button>
		         <button type="button" class="btn btn-default btn-sm" aria-label="Left Align" name="down_ord">
                    <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                </button>
		        <input type="hidden" value=${emploee.ord} />
		    </td>
		    <td ><input type="button" class="btn btn-primary" value="修改"  onclick="edit(this)"/></td>
		</tr>
		
		</c:forEach>
	</table> 
	<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">编辑信息</h4>
      </div>
      <div class="modal-body ">
         <form id="emp_edit">
     <table  class="table table-bordered text-center" style="table-layout:fixed "  id="tb_edit" name="dept_id">
		<tr >
		    <th class="col-xs-4 text-center">部门名称</th>
		        <td ><select class="form-control"  id="dept_sel" name="dept.id">
		                <option value="">请选择部门</option>
                    <c:forEach items = "${deptlist}" var = "dept"  >
                        <option value=${dept.id }>${dept.deptName }</option>
                    </c:forEach>
                </select>
                </td>
		</tr>
		
		<tr>
		    <th class="text-center">姓名</th>
		    
		    <td ><input name='id'  type='hidden'/>
		    <div>
		    <input type="text" class="form-control "  placeholder="输入姓名" name="name" id="name2"/></td>
		    </div>
		</tr>
		
		    <th class="text-center" >职位</th><td ><input type="text" class="form-control" placeholder="职位" name="position" /></td>
		</tr>
		<tr>
		    <th class="text-center" >手机</th><td ><input type="text" class="form-control" placeholder="手机" name="mobile" /></td>
		</tr>
		<tr>
		    <th class="text-center" >固定电话</th><td ><input type="text" class="form-control" placeholder="电话" name="phone" /></td>
		</tr>
		<tr>
		    <th class="text-center" >内线</th><td ><input type="text" class="form-control" placeholder="内线" name="interphone" /></td>
		</tr>
		<tr>
		    <th class="text-center" >短号</th><td ><input type="text" class="form-control" placeholder="短号" name="shortphone" /></td>
		</tr>
		<tr>
		    <th class="text-center" >邮箱</th><td ><input type="text" class="form-control" placeholder="邮箱" name="email" /><input type="hidden"  name="ord" /></td>
		</tr>
		
	
	</table> 
	</form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" onclick="save(this)">保存</button>
      </div>
    </div>
  </div>
</div>
    
    
    


<script type="text/javascript"> 
 //姓名输入焦点移开检查是否为空
  $("#name2").blur(function(){
       if($("#name2").val()==""){
         $("#name2").parent("div").addClass("has-error");       //更改input的class外框为红色
         $("#name2").attr("placeholder","姓名不能为空");        //input默认文字更改
         $("#name2").focus();                                  //获得焦点
         
      }
  })

 
  function edit(btn){
   var tr =$(btn).parent("td").parent("tr");
	var td_list=$(btn).parent("td").siblings("td");
    var id =tr.attr("id")
    var btn_count =$("input[type='button'][value='保存']").size(); 
    
    //iframe层-父子操作
    var count=$("#dept_sel option").length;   //设置选中
      for(var i=0;i<count;i++)
         {           if($("#dept_sel ").get(0).options[i].text == td_list.eq(0).text())
            {
                $("#dept_sel ").get(0).options[i].selected = true;
                break;
            }
        } 
    
    
    $("input[name='id']").val(id);
    $("input[name='name']").val(td_list.eq(1).text());
    $("input[name='position']").val(td_list.eq(2).text());
    $("input[name='mobile']").val(td_list.eq(3).text());
    $("input[name='phone']").val(td_list.eq(4).text());
    $("input[name='interphone']").val(td_list.eq(5).text());
    $("input[name='shortphone']").val(td_list.eq(6).text());
    $("input[name='email']").val(td_list.eq(7).text());
    $("input[name='ord']").val(td_list.eq(8).find("input").val());
    $("#myModal").modal("show");
    
    }
    
  
 function save(btn){
     var tr =$(btn).parent("td").parent("tr");
     var td_list=tr.find("input");
     var id =tr.attr("id");
     var dept_id = $("#dept_sel").val();
     var emploee=$("#emp_edit").serialize();
     $.post("emploee_update",
     emploee,
     function(data){
       if(data !=null){
       $("#myModal").modal("hide");
       location.reload();
       }
        
     })
     
 }
 
     function up(btn){
       var id1= $(btn).parent("td").parent("tr").attr("id");
       
       var id2 = $(btn).parent("td").parent("tr").prev().attr("id");
        $.post("emploee_edit_ord",{id1 : id1 ,id2 : id2},
        function(){
        $("#emploee_edit").load("emploee_edit")
        /* location.reload(); */
        }
        ); 
     }
     
     $("button[name='up_ord']").click(function(){                     //与前一个元素兑换ord
       var id1 = $(this).parent("td").parent("tr").attr("id");
       var id2 = $(this).parent("td").parent("tr").prev().attr("id");
       $.post("emploee_edit_ord",{id1 : id1 ,id2 : id2},
        function(data){
        if(data=="faile"){
        alert("不同部门员工不能调整顺序");
        }else{
        location.reload();
        }
        
        }
        );
     });

     $("button[name='down_ord']").click(function(){                 //与后一个元素兑换ord
       var id1 = $(this).parent("td").parent("tr").attr("id");
       var id2 = $(this).parent("td").parent("tr").next().attr("id");
       $.post("emploee_edit_ord",{id1 : id1 ,id2 : id2},
          function(data){
        if(data=="faile"){
        alert("不同部门员工不能调整顺序");
        }else{
        location.reload();
        }
        
        }
        );
        
     });
     
    
    //table的第一条记录只留down按钮，最后一个记录只留UP按钮
    $(function(){
      $("button[name='up_ord']").first().hide();
      $("button[name='down_ord']").last().hide();
   });
     
     
   

    $("#checkall").click(function(){       //全选与反选
    var self = $(this);
    if(self.prop("checked")){    
        $(":checkbox").prop("checked", true);   
    }else{    
        $(":checkbox").prop("checked", false); 
    }    
});  
   
   
</script>

